import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import {connect} from 'react-redux'
import { setIsRoomHost } from '../../store/action';
import JoinRoomTttle from './JoinRoomTttle';
import './JoinRoomPage.css'
import JoinRoomContent from './JoinRoomContent';
const JoinRoomPage = (props) => {
  const {setIsRoomHostAction,isRoomHost} = props;
  const search =  useLocation().search;
  useEffect(()=>{
    const isRoomHost = new URLSearchParams(search).get('host');
    if(isRoomHost){
      //是否是主持人状态保存到redux中的store中
      setIsRoomHostAction(isRoomHost);
    }
  },[]);
  return (
    <div className='join_room_page_container'>
      <div className='join_room_page_panel'>
       <JoinRoomTttle isRoomHost={isRoomHost}/>
       <JoinRoomContent/>
      </div>
    </div>
  )
}
/**
 * 获取state状态
 * @param {*} state 
 */
const mapStateToProps = (state) => {
  return {
    ...state,
  };
};
const mapActionsToProps = (dispatch) => {
  return {
    setIsRoomHostAction:(isRoomHost) => dispatch(setIsRoomHost(isRoomHost)),
  };
};
export default connect(mapStateToProps,mapActionsToProps) (JoinRoomPage);